<style>
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        margin-left: 3px;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .price{
        color: red;
    }
</style>

<template>
    <el-row style="height: 640px">
        <el-col :span="2">
            <el-button type="primary" @click="dialogFormVisiable = true">新增产品</el-button>
        </el-col>
        <el-col :span="5">
            <el-input v-model="select_word" placeholder="筛选关键词" ></el-input>
        </el-col>
        <el-col :span="17">
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="4" v-for="(product,index) in products" :offset="(index + 1)%5 != 1 ? 1 : 0" style="margin-top:10px;">
            <el-card :body-style="{ padding: '0px' }">
                <img :src="product.path" class="image">
                    <div style="padding: 5px;">
                    <span>{{ product.title }}</span>
                    <div class="bottom clearfix">
                        <span class="price">￥{{ product.price }}</span>
                    </div>
                    <div class="bottom clearfix">
                        <el-button type="text">{{ product.created_at }}</el-button>
                        <el-button class="button" size="mini" type="danger" icon="el-icon-delete" circle @click="deleteProductById(product.id)"></el-button>
                        <el-button class="button" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-dialog title="新增产品" :visible.sync="dialogFormVisiable">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="产品名称">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="产品价格">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="产品简述">
                    <el-input v-model="form.simpledes"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-upload
                            class="upload-demo"
                            action="https://www.yiliyuan.vip/index.php/api/upload"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="addPathInfo"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="详细描述">
                    <el-input type="textarea" v-model="form.des"></el-input>
                </el-form-item>
                <el-form-item label="立即展示">
                    <el-switch v-model="form.status"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                products:[],
                dialogFormVisiable: false,
                form: {
                    title: '',
                    price: '',
                    simpledes: '',
                    des: '',
                    path:'',
                    status: false
                },
                fileList: [],
                select_word:''
            }
        },
        created() {
            this.getProducts();
        },
        methods:{
            getProducts(){
                this.$axios.get('/products')
                    .then((res) => {
                        this.products = res.data.data;
                    })
            },
            onSubmit(){
                //提交保存之前先验证数据的合法性
                this.$axios.post('/products',this.form)
                    .then((res) => {
                        if(res.data){
                            this.dialogFormVisiable = false;
                            this.$message({
                                message:'新增产品成功',
                                type: 'success'
                            });
                            this.getProducts();
                        }else{
                            this.$message.error('产品新增失败，请重试');
                        }
                    })
            },
            deleteProductById(id){
                console.log(id);
                this.$axios.delete('/products/'+id)
                    .then((res) => {
                        this.$message({
                            message:'删除成功',
                            type: 'success'
                        });
                        this.getProducts();
                    })
            },
            handleRemove(file, fileList){
                console.log(file,fileList);
            },
            handlePreview(file){
                console.log(file);
            },
            addPathInfo(response,file,fileList){
                this.form.path = response.data;
            },
            search(){
                this.$axios.get('products?title='+this.select_word)
                    .then((res) => {
                        this.products = res.data.data;
                    })
            }

        }
    }
</script>
